<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getVulnerabilityDetail } from "../servers";
import { message } from "@/utils/message";

defineOptions({
  name: "",
});

const route = useRoute();
const loading = ref(false);
const detailData = ref<any>({});

// 获取漏洞详情
const getDetailData = async () => {
  const avd_id = route.query.avd_id as string;
  if (!avd_id) {
    message("缺少漏洞ID参数", { type: "error" });
    return;
  }

  loading.value = true;
  try {
    const response = await getVulnerabilityDetail(avd_id);
    console.log("漏洞详情响应:", response);

    if (response && response.data) {
      detailData.value = response.data;
    }
  } catch (err) {
    console.error("获取漏洞详情失败:", err);
    message("获取漏洞详情失败", { type: "error" });
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return "N/A";
  try {
    return new Date(dateStr).toLocaleString("zh-CN");
  } catch {
    return dateStr;
  }
};

// 获取风险等级标签类型
const getRiskType = (level: string) => {
  switch (level) {
    case "高危":
      return "danger";
    case "中危":
      return "warning";
    case "低危":
      return "info";
    default:
      return "info";
  }
};

// 获取补丁状态标签类型
const getPatchType = (status: string) => {
  switch (status) {
    case "官方补丁":
      return "success";
    case "暂无补丁":
      return "danger";
    case "第三方补丁":
      return "warning";
    default:
      return "info";
  }
};

// 格式化漏洞描述
const formatDescription = (description: string) => {
  if (!description) return "N/A";
  return description.replace(/\n/g, "<br>");
};

// 格式化修复建议
const formatSolution = (solution: string) => {
  if (!solution) return "N/A";
  return solution.replace(/\n/g, "<br>");
};

// 格式化影响软件
const formatAffectedSoftware = (software: string) => {
  if (!software || software === "[]") return "N/A";
  try {
    const list = JSON.parse(software);
    return Array.isArray(list) ? list.join(", ") : software;
  } catch {
    return software;
  }
};

// 格式化参考链接
const formatReferenceLinks = (links: string) => {
  if (!links) return "N/A";
  try {
    const linkList = JSON.parse(links);
    if (Array.isArray(linkList)) {
      return linkList
        .map(
          (link) =>
            `<a href="${link}" target="_blank" style="color: #409eff; text-decoration: none; margin-right: 10px;">${link}</a>`
        )
        .join("<br>");
    }
    return links;
  } catch {
    return links;
  }
};

// 格式化CWE信息
const formatCWEInfo = (cweInfo: string) => {
  if (!cweInfo) return "N/A";
  try {
    const cweList = JSON.parse(cweInfo);
    if (Array.isArray(cweList)) {
      return cweList
        .map(
          (cwe) =>
            `<div style="margin-bottom: 8px;">
          <strong>CWE-${cwe["CWE-ID"]}:</strong> ${cwe["漏洞类型"] || "N/A"}
        </div>`
        )
        .join("");
    }
    return cweInfo;
  } catch {
    return cweInfo;
  }
};

// 获取评分详情
const getScoreDetail = (scoreDetails: string, key: string) => {
  if (!scoreDetails) return "N/A";
  try {
    const details = JSON.parse(scoreDetails);
    return details[key] || "N/A";
  } catch {
    return "N/A";
  }
};

onMounted(() => {
  getDetailData();
});
</script>

<template>
  <div class="vulner-detail">
    <el-card v-loading="loading" shadow="never">
      <template #header>
        <div class="card-header">
          <h3>漏洞详情</h3>
        </div>
      </template>

      <!-- 基础信息 -->
      <el-descriptions title="基础信息" :column="2" border>
        <el-descriptions-item label="情报名称">
          {{ detailData.title || "N/A" }}
        </el-descriptions-item>
        <el-descriptions-item label="情报等级">
          <el-tag :type="getRiskType(detailData.danger_level)" size="small">
            {{ detailData.danger_level || "N/A" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="情报详情" :span="2">
          <div v-html="formatDescription(detailData.vuln_description)"></div>
        </el-descriptions-item>
        <el-descriptions-item label="修复建议" :span="2">
          <div v-html="formatSolution(detailData.solution_suggestion)"></div>
        </el-descriptions-item>
        <el-descriptions-item label="情报来源">
          {{ "topsec" }}
        </el-descriptions-item>
        <el-descriptions-item label="POC">
          {{ detailData.exploit_status || "N/A" }}
        </el-descriptions-item>
        <el-descriptions-item label="参考链接" :span="2">
          <div v-html="formatReferenceLinks(detailData.reference_links)"></div>
        </el-descriptions-item>
        <el-descriptions-item label="发布时间" :span="2">
          {{ formatDate(detailData.disclosure_time) }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="影响范围" :span="2">
          {{ formatAffectedSoftware(detailData.affected_software) }}
        </el-descriptions-item> -->
      </el-descriptions>

      <!-- CVSS评分信息 -->
      <el-descriptions title="CVSS评分详情" :column="2" border class="mt-4">
        <el-descriptions-item label="总体评分">
          <el-tag type="warning" size="small">{{
            detailData.aliyun_score || "N/A"
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="攻击路径">
          {{ getScoreDetail(detailData.score_details, "攻击路径") }}
        </el-descriptions-item>
        <el-descriptions-item label="权限要求">
          {{ getScoreDetail(detailData.score_details, "权限要求") }}
        </el-descriptions-item>
        <el-descriptions-item label="用户交互">
          {{ getScoreDetail(detailData.score_details, "用户交互") }}
        </el-descriptions-item>
        <el-descriptions-item label="攻击复杂度">
          {{ getScoreDetail(detailData.score_details, "攻击复杂度") }}
        </el-descriptions-item>
        <el-descriptions-item label="影响范围">
          {{ getScoreDetail(detailData.score_details, "影响范围") }}
        </el-descriptions-item>
        <el-descriptions-item label="数据保密性">
          {{ getScoreDetail(detailData.score_details, "数据保密性") }}
        </el-descriptions-item>
        <el-descriptions-item label="数据完整性">
          {{ getScoreDetail(detailData.score_details, "数据完整性") }}
        </el-descriptions-item>
        <el-descriptions-item label="服务可用性">
          {{ getScoreDetail(detailData.score_details, "服务可用性") }}
        </el-descriptions-item>
        <el-descriptions-item label="EXP成熟度">
          {{ getScoreDetail(detailData.score_details, "EXP成熟度") }}
        </el-descriptions-item>
        <el-descriptions-item label="全网数量">
          {{ getScoreDetail(detailData.score_details, "全网数量") }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- CWE信息 -->
      <el-descriptions title="CWE信息" :column="1" border class="mt-4">
        <el-descriptions-item label="CWE详情">
          <div v-html="formatCWEInfo(detailData.cwe_info)"></div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.vulner-detail {
  padding: 20px;
}
:deep(.el-descriptions__label) {
  white-space: nowrap;
}

.card-header {
  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
}

.mt-4 {
  margin-top: 16px;
}

:deep(.el-descriptions__title) {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

:deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-descriptions__body) {
  background: #fafafa;
}

:deep(.el-descriptions__table) {
  .el-descriptions__cell {
    border-color: #e4e7ed;
  }
}

// 链接样式
:deep(a) {
  color: #409eff;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}
</style>
